@font-face {
	font-family: "IBM Plex";
	src: url("fonts/IBM Plex/IBMPlexSans-Light.ttf");
	font-weight: normal;
}
@font-face {
	font-family: "IBM Plex";
	src: url("fonts/IBM Plex/IBMPlexSans-Regular.ttf");
	font-weight: normal;
}

:root {
	--primary-text: #d1d5db;
	--primary-text-alt: #ececf1;
	--secondary-text: #ffffff80;
	--background: #343541;
	--background-mid: #2c2d30;
	--background-alt: #202123;
	--surface: #444654;
	--surface-alt: #565869;
	--surface-alt-bright: #acacbe;
	--tertiary: #3e3f4b;
	--accent: rgba(16, 163, 127);
	--secondary: rgba(26, 127, 100);
	--error: #ff5d5d;
	--overlay: rgba(52, 53, 65, 0.9);
	--hover: hsla(240, 9%, 59%, 0.1);
	--text-box-border: rgba(32, 33, 35, 0.5);
	--border: rgb(64, 65, 79);
	--small-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: light) {
	:root {
		--primary-text: #374151;
		--primary-text-alt: #343541;
		--secondary-text: #00000080;
		--background: #ffffff;
		--background-mid: #d9d9e3;
		--background-alt: #ffffff;
		--surface: #ffffff;
		--surface-alt: #bfc0cc;
		--surface-alt-bright: #acacbe;
		--tertiary: #f7f7f8;
		--accent: rgba(16, 163, 127);
		--secondary: rgba(26, 127, 100);
		--error: #ff5d5d;
		--overlay: rgba(141, 141, 160, 0.9);
		--hover: hsla(240, 9%, 59%, 0.1);
		--text-box-border: rgba(0, 0, 0, 0.1);
		--border: rgb(166, 169, 202);
		--small-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	}
}

*::-webkit-scrollbar {
	-webkit-appearance: none;
}
*::-webkit-scrollbar:vertical {
	width: 8px;
}
*::-webkit-scrollbar:horizontal {
	height: 8px;
}
*::-webkit-scrollbar-thumb {
	border-radius: 8px;
	background-color: var(--surface-alt);
}
*::-webkit-scrollbar-thumb:hover {
	background-color: #acacbe;
}
*::-webkit-scrollbar-track {
	background-color: transparent;
	border-radius: 8px;
}

* {
	color: var(--primary-text);
	font-size: 1rem;
	line-height: 28px;
	/* font-family: Sohne; */
	font-family: "IBM Plex", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	font-weight: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: revert;
	font-weight: bold;
}

code {
	line-height: 1.5;
	display: block;
	overflow: auto hidden;
	/* font-family: "Sohne Mono"; */
	font-family: Monaco, Andale Mono, Ubuntu Mono, monospace;
}
pre:has(code) {
	padding: 8px;
	border-radius: 8px;
	background: #8883;
	border: #8884 solid 1px;
}

button {
	cursor: pointer;
}

html,
body {
	background-color: var(--background-mid);
}
body {
	margin: 0;
	padding: 0px;
	overflow: hidden;
}

.input-field {
	background: var(--surface);
	display: flex;
	padding: 10px;
	box-sizing: border-box;
	box-shadow: 0 0 15px #00000010;
	border-radius: 0.375rem;
	border: solid 1px var(--text-box-border);
	pointer-events: all;
}
#input {
	white-space: pre-wrap;
	padding: 5px;
	outline: none;
	border: none;
	flex-grow: 1;
	box-sizing: border-box;
	background: none;
	max-height: 200px;
	overflow: hidden scroll;
	resize: none;
	line-height: 24px;
}
#input:focus {
	outline: none;
}
button {
	color: white;
	border: none;
	border-radius: 5px;
	outline: none;
	box-sizing: border-box;
	background: #0005;
}
button#stop,
button#autocomplete,
button#clear {
	background: none;
	height: 32px;
	width: 32px;
	align-items: center;
	justify-content: center;
}
button#clear {
	opacity: 0.75;
	margin-right: 5px;
}
button#stop:hover,
button#autocomplete:hover,
button#clear:hover {
	background: var(--background-alt);
}
button#stop,
.running-model button#autocomplete {
	display: none;
}
.running-model button#stop,
button#autocomplete,
button#clear {
	display: flex;
}
#input:placeholder-shown ~ button#clear {
	display: none;
}

#main {
	display: flex;
	margin-top: 32px;
	max-height: calc(100vh - 32px);
	position: fixed;
	top: 0;
	left: 0;
}
html.darwin #main {
	margin-top: 28px;
	max-height: calc(100vh - 28px);
}
#feed {
	width: calc(100vw - 200px);
	height: 100vh;
	overflow-y: auto;
	background-color: var(--background);
}
.logo {
	font-weight: bold;
	display: block;
	font-size: 2.25rem;
	line-height: 2.5rem;
	color: var(--primary-text-alt);
	margin: 0 auto 4rem;
}
#feed-placeholder-alpaca {
	text-align: center;
	max-width: 48rem;
	margin: auto;
	display: block;
	margin: 20vh auto 12rem;
}
#feed-placeholder-alpaca:not(:last-child) {
	display: none;
}
@media (max-width: 1024px) {
	#feed-placeholder-alpaca {
		text-align: center;
		max-width: 48rem;
		margin: auto;
		display: block;
		margin: 20vh 1.5rem 12rem;
	}
}

.columns,
.column {
	display: flex;
	gap: 0.875rem;
}
.columns {
	justify-content: space-around;
}
.column {
	flex-direction: column;
	align-items: center;
	flex: 1 1 0%;
}
.column h3 {
	margin: 0;
}
.column .card {
	background-color: var(--tertiary);
	padding: 0.75rem;
	letter-spacing: 0.1px;
	font-size: 0.9rem;
	border-radius: 0.375rem;
	width: calc(100% - 1.75rem);
	color: var(--primary-text-alt);
}
.column button.card {
	width: 100%;
}
.column button.card:hover {
	background-color: var(--background-mid);
}

#messages {
	list-style-type: none;
	margin: 0;
	box-sizing: border-box;
	padding: 0;
	margin-bottom: 200px;
}
#messages > li {
	box-sizing: border-box;
	padding: 24px calc((100% - 48rem + 96px) / 2) 24px calc((100% - 48rem + 96px) / 2 + 48px);
}
#messages > li.user-msg {
	background: var(--surface);
}
#messages > li > br {
	display: none;
}
li {
	white-space: pre-wrap;
}
#messages > li::before {
	width: 32px;
	height: 32px;
	content: "";
	display: inline-block;
	background-size: cover;
	position: relative;
	margin-left: -48px;
	margin-right: 16px;
	margin-top: -32px;
	top: 14px;
	border-radius: 5px;
}
#messages > li.user-msg::before {
	background-image: url(img/user.png);
}
#messages > li.bot-msg::before {
	background-image: url(img/alpaca.png);
}
#messages > li.bot-web-msg::before {
	background-image: url(img/alpaca-web.png);
}

@-webkit-keyframes spin {
	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}

@keyframes spin {
	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}
.loading {
	margin-bottom: 10px;
	padding: 10px;
	box-sizing: border-box;
	background: none;
	opacity: 0;
	pointer-events: none;
}
.loading svg {
	animation: spin 1s linear infinite;
}
/* .hidden */
form.running-model .loading {
	opacity: 1;
}

.input-container {
	margin: 10px 48px;
	max-width: 48rem;
	width: calc(100vw - 296px);
}
.info {
	font-size: 12px;
	padding: 5px;
	text-align: center;
}

#form {
	position: fixed;
	bottom: 0;
	width: calc(100vw - 200px);
	display: flex;
	flex-direction: column;
	align-items: center;
	background-image: linear-gradient(180deg, #0000, var(--background) 58.85%);
	margin: 0;
	pointer-events: none;
}
.form-header {
	display: flex;
	align-items: start;
	justify-content: flex-start;
	margin: 0;
	width: 200px;
	background-color: #202123;
	height: calc(100vh - 182px);
	overflow: hidden auto;
	flex-direction: column;
}
.form-header * {
	color: #d1d5db;
}
input[type="number"],
input[type="text"],
select {
	margin-bottom: 10px !important;
	border: #fff1 solid 1px;
	outline: none;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 5px;
	padding: 5px 10px;
	box-sizing: border-box;
}
input[type="number"]:focus,
input[type="text"]:focus,
select:focus {
	border: #fff3 solid 1px;
}
select {
	display: inline-block;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	padding-right: 40px;
	text-overflow: ellipsis;
}
label.dropdown-arrow {
	position: relative;
}
label.dropdown-arrow:after {
	content: ">";
	font: 16px "Consolas", monospace;
	color: #888;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	transform: rotate(90deg);
	right: 5px;
	top: 5px;
	padding: 0 0 5px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #8885;
	position: absolute;
	pointer-events: none;
}
option {
	background-color: #202123;
	height: 20px;
}

.config-container {
	display: flex;
	flex-wrap: wrap;
	width: 160px;
	padding: 10px 20px;
	padding-bottom: 200px;
}
.kv {
	display: block;
	max-width: 100%;
}
.kv label {
	display: block;
	padding: 5px 0px;
	font-size: 12px;
	max-width: 100%;
}
.kv input {
	max-width: 100%;
}

.switch {
	position: relative;
	display: inline-block;
	width: 3rem;
	height: 1rem;
	pointer-events: all;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 6px;
	height: 1.25rem;
	width: 2.25rem;
	background-color: var(--surface-alt);
	-webkit-transition: 0.4s;
	transition: 0.4s;
	border-radius: 420px;
}
.slider:before {
	position: absolute;
	content: "";
	height: 1rem;
	width: 1rem;
	left: 0.125rem;
	top: 0.125rem;
	background-color: white;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	border-radius: 69px;
}
input:checked + .slider {
	background-color: var(--accent);
}
input:checked + .slider:before {
	-webkit-transform: translateX(1rem);
	-ms-transform: translateX(1rem);
	transform: translateX(1rem);
}
.slider.round {
	border-radius: 34px;
}
.slider.round:before {
	border-radius: 50%;
}

.action-button {
	margin: 0.5rem 0.5rem 0;
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: calc(100% - 3rem);
	border-radius: 0.375rem;
	cursor: pointer;
	background-color: transparent;
	transition: all 0.1s ease-out;
}
.action-button:hover {
	background-color: var(--hover);
}

#resources {
	position: fixed;
	width: 200px;
	height: 150px;
	background-color: #2c2d30;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: left;
}
.resource-item {
	flex: 1 1 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
.resource-item:not(:first-child) {
	border-top: 1px #fff1 solid;
}
.resource-item * {
	margin: 0 25px;
	line-height: 14px;
	color: #d1d5db;
}
.resource-item .text {
	padding: 5px 0;
}
.bar {
	width: 142px;
	height: 10px;
	border-radius: 69px;
	background-color: #565869;
	overflow: hidden;
}
.bar-inner {
	height: 100%;
	width: 100%;
	margin: 0;
	background-color: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1s linear;
}

.dialog-bg {
	background-color: var(--overlay);
	width: 100vw;
	height: 100vh;
	margin: 0;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.1s;
	opacity: 1;
}
.dialog-bg.hidden {
	opacity: 0;
	pointer-events: none;
}
.dialog-box {
	width: 500px;
	background-color: var(--background-alt);
	display: flex;
	flex-direction: column;
	border-radius: 0.375rem;
	border: 1px var(--border) solid;
	box-shadow: var(--small-shadow);
	transition: all 0.1s;
	transform: scale(1);
}
.dialog-bg.hidden .dialog-box {
	transform: scale(0.85);
}
.dialog-title {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	border-bottom: 1px var(--border) solid;
}
.dialog-title * {
	margin: 0;
}
.dialog-close {
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dialog-content {
	display: flex;
	flex-direction: column;
	padding: 1rem;
	gap: 0.75rem;
	border-bottom: 1px var(--border) solid;
	max-height: calc(100vh - 300px);
	overflow-y: scroll;
}
.dialog-content * {
	margin: 0;
}
.dialog-button {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	padding: 0.75rem 1rem;
	gap: 0.75rem;
}
.dialog-button button {
	padding: 0.5rem 1rem;
	transition: all 0.1s;
}
button.primary {
	background-color: var(--accent);
}
button.primary:hover {
	background-color: var(--secondary);
}
button.secondary {
	background-color: var(--surface-alt);
}
button.secondary:hover {
	background-color: var(--surface);
}
@media (prefers-color-scheme: light) {
	button.secondary:hover {
		background-color: #b1b3c2;
	}
}

p.error-text {
	font-size: 12px;
	color: var(--error);
	margin: 0;
	margin-top: -24px;
}
p.error-text::before {
	content: "⚠  ";
	font-weight: lighter;
	font-size: 20px;
	position: relative;
	top: 2px;
}
#path-dialog input[type="text"] {
	flex-grow: 1;
	text-overflow: ellipsis;
}
#path-dialog button {
	width: 40px;
	height: 40px;
}

.settings-items > .item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.settings-items > .item > input,
.settings-items > .item select {
	width: 7.5rem;
}
